<!-- 
搜索弹出框的产品内容展示页面
 * @Author: zuobufan
 * @Location: 安庆石化信息中心
 * @LastEditors: zuobufan
 * @LastEditTime: 2021-09-16 17:54:00
 -->
<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled title="综合"/>
      <van-dropdown-item @change="priceChange" title="价格" v-model="priceVal" :options="option2"/>
      <van-dropdown-item @change="categoryChange" title="分类" v-model="categoryVal" :options="filterCategory"/>
    </van-dropdown-menu>

    <van-empty v-if="goodsList.length == 0" image="search" description="没有您搜索的商品" />
    <Products v-else :goodsList="goodsList" />
  </div>
</template>

<script>

import Products from "@/components/Products"
export default {
    components:{
        Products
    },
    props:["filterCategory","goodsList"],
  data() {
    return {
      priceVal: "desc",
      categoryVal: "",
      option2: [
        { text: "价格由低到高", value: "asc" },
        { text: "价格由高到低", value: "desc" }
      ]
    };
  },
  created() {},
  beforeUpdate() {
      this.filterCategory.map(item =>{
          if(item.checked){
              this.categoryVal = item.value;
              return
          }
      })
  },
  methods: {
      categoryChange(value){    
        //   console.log(value);
          this.$emit("categoryChange",value);
          
      },
      priceChange(value){
          this.$emit("priceChange",value)
      }
  }
};
</script>
<style scoped>
* {
  font-size: 0.14rem;
}
</style>